<template>
	<gui-popup ref="guiPopupRef" position="bottom" @close="notUpdate">
		<view class="user-cnontent">
			<view @tap="handleClose" class="user-close gui-flex gui-align-items-center gui-justify-content-center">
				<u-icon name="close" color="#999" size="24"></u-icon>
			</view>
			<view class="user-top gui-flex gui-align-items-center">
				<image class="user-logo" src="@/static/logo.png" mode="aspectFill"></image>
				<view class="user-info gui-flex1 gui-flex gui-column">
					<text class="user-title">登陆后体验更多功能</text>
					<text class="user-desc">99%+用户选择使用微信头像和昵称便于客服交和售后沟通流</text>
				</view>
			</view>
			<view class="user-header gui-flex gui-column gui-align-items-center">
				<button class="user-headImg" style="padding: 0;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<!-- <image src="https://miyuzl.com/uploads/user/avatar/0516b7be581fed3629ceda38ab2c21fc.jpeg" mode="aspectFill"></image> -->
					<image :src="formData.avatarUrl" mode="aspectFill" v-if="formData.avatarUrl">
					</image>
					<image src="@/static/image/my_portrait_empty.png" mode="aspectFill" v-else>
					</image>
					<view class="user-camera gui-flex gui-align-items-center gui-justify-content-center">
						<u-icon name="camera-fill" color="#fff" size="20"></u-icon>
					</view>
				</button>
				<view class="user-input gui-flex1">
					<input type="nickname" class="nick-input gui-flex1 gui-text-center" @blur="onNicknameBlur"
						v-model="newNickname" placeholder="请输入昵称" />
				</view>
				<view @tap="submit"
					class="saveBtn gui-color-white gui-flex gui-align-items-center gui-justify-content-center">
					保存
				</view>
			</view>
		</view>
	</gui-popup>

</template>
<script setup>
	const props = defineProps({
		userInfo: {
			type: Object,
			default: null
		}
	})
	import {
		upUserInfoPost
	} from '@/api/app.js';
	import config from '@/config/app.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	const store = useUserStore()
	const {
		userInfo,
		isLogin
	} = storeToRefs(store)

	const {
		baseURL
	} = config;
	import {
		TOKEN
	} from '@/config/cachekey.js'
	import Cache from '@/utils/cache.js'
	import {
		ref,
		reactive,
		inject,
		defineEmits
	} from 'vue'
	const emit = defineEmits(['sumbit', 'close'])
	const $u = reactive(inject('$u'));
	const guiPopupRef = ref()

	const FieldType = {
		NONE: '',
		NICKNAME: 'nickname',
		AVATAR: 'avatar'
	}

	const fieldType = ref(FieldType.NONE);
	const isChangeAvatar = ref(false);
	const formData = ref({
		avatarUrl: '',
		nickName: ''
	})
	const newNickname = ref('');

	const submit = () => {
		if (!formData.value.avatarUrl) return $u.msg('请上传头像！');
		if (!newNickname.value) return $u.msg('请填写昵称！');
		let form = Object.assign(newNickname, {})
		formData.value.nickName = form.value;
		updateUserInfo();
	}

	const onChooseAvatar = (e) => {
		formData.value.avatarUrl = e.detail.avatarUrl
		isChangeAvatar.value = true
	}

	const onNicknameBlur = (e) => {
		newNickname.value = e.detail.value;
	}

	const handleOpen = () => {
		guiPopupRef.value.open()
	}

	const handleClose = () => {
		guiPopupRef.value.close()
	}
	
	const setDefult = (data) => {
		formData.value.avatarUrl = data.avatarUrl
		newNickname.value = data.nickName
		
	}
	
	// 修改用户信息
	const updateUserInfo = () => {
		if (isChangeAvatar.value) {
			uni.showLoading({
				title: '正在上传中...',
				mask: true
			});
			uni.uploadFile({
				url: `${baseURL}/common/uploadLocal`,
				filePath: formData.value.avatarUrl,
				name: 'file',
				header: {
					Authorization: Cache.get(TOKEN)
				},
				success: (uploadRes) => {
					uni.hideLoading();
					try {
						uploadRes = JSON.parse(uploadRes.data);
						if (uploadRes.code != '200') {
							uni.showToast({
								title: "上传失败 : " + uploadRes.data,
								icon: "none"
							});
						} else {
							//上传图片成功
							isChangeAvatar.value = false;
							formData.value.avatarUrl = uploadRes.url;
							let form = Object.assign(formData.value, {})
							upUserInfoPost(form).then(res => {
								if(res.code == 200) {
									store.getUserFun();
									emit('sumbit')
								}
							})
						}
					} catch (e) {
						uni.showToast({
							title: "上传失败 : " + e,
							icon: "none"
						});
					}
				},
				fail: (e) => {
					uni.hideLoading();
					uni.showToast({
						title: "上传失败，请点击图片重试",
						icon: "none"
					});
				}
			});
		}else {
			let form = Object.assign(formData.value, {})
			upUserInfoPost(form).then(res => {
				if(res.code == 200) {
					store.getUserFun();
					emit('sumbit')
				}
			})
		}
	}
	
	const notUpdate = () => {
		console.log("执行了==========");
		emit('close')
	}
	// 抛出函数
	defineExpose({
		handleOpen,
		handleClose,
		setDefult
	})
</script>

<style lang="less" scoped>
	.user-cnontent {
		position: relative;
		background: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 30rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
		box-sizing: border-box;

		.user-close {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			right: 0;
			top: 0;
		}

		.user-top {
			.user-logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.user-info {
				.user-title {
					font-size: 30rpx;
					color: #000;
				}

				.user-desc {
					color: #666;
					font-size: 26rpx;
					margin-top: 10rpx;
				}
			}
		}

		.user-header {
			padding: 50rpx 20rpx 0 20rpx;

			.user-headImg {
				position: relative;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.user-camera {
					position: absolute;
					right: 0rpx;
					bottom: 0rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background: #00B26A;
					border: 1px solid #fff;
				}
			}
		}

		.user-input {
			width: 100%;
			background: #eee;
			border-radius: 50rpx;
			margin-top: 40rpx;

			.nick-input {
				height: 80rpx;
			}
		}

		.saveBtn {
			width: 100%;
			height: 80rpx;
			background: #00B26A;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
	}

	// color: #00B26A;
</style>